<template>
  <div class="login_page">
    <div class="login_model">
      <div class="model-title">后台管理系统</div>
      <div class="model-form">
        <el-form :model="form" label-width="auto">
          <el-form-item label="用户名">
            <el-input :prefix-icon="UserFilled" v-model="form.userName" placeholder="请输入" />
          </el-form-item>
          <el-form-item label="密码">
            <el-input :prefix-icon="Lock" type="password" show-password v-model="form.userPassword" placeholder="请输入" />
          </el-form-item>
          <el-form-item class="form-item-btn">
            <div class="btn-item pointer" v-if="!loginStatus" @click="onSubmit">
              登录
            </div>
            <div class="btn-item" v-if="loginStatus">登录中. . .</div>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
const { proxy } = getCurrentInstance();
import { useRouter } from "vue-router";
const router = useRouter();

// 登录信息
const form = reactive({
  userName: "",
  userPassword: "",
});
// 登录按钮
const loginStatus = ref(false);

// 登录点击
const onSubmit = () => {
  if (!form.userName) {
    proxy.$warningMes("用户名输入错误，请修改！");
    return false;
  }
  if (form.userName != "admin") {
    proxy.$warningMes("用户名输入错误，请修改！");
    return false;
  }
  if (!form.userPassword) {
    proxy.$warningMes("密码输入错误，请修改！");
    return false;
  }
  if (form.userPassword != "admin123") {
    proxy.$warningMes("密码输入错误，请修改！");
    return false;
  }
  loginStatus.value = true;
  // 用户名以及密码存储
  proxy.$SetLocal("userName", form.userName);
  proxy.$SetLocal("userPassword", form.userPassword);
  setTimeout(() => {
    proxy.$successMes("登录成功！");
    proxy.$SetLocal("myVuecomponentsToken", "my-vue-components");
    router.push("/dashboard");
  }, 2000);
};

// 组件挂载
onMounted(() => {
  form.userName = proxy.$GetLocal("userName")
    ? proxy.$GetLocal("userName")
    : "";
  form.userPassword = proxy.$GetLocal("userPassword")
    ? proxy.$GetLocal("userPassword")
    : "";
});
</script>
<style scoped lang="scss">
.login_page {
  background: url("@img/login_bg_y.gif") repeat;
  @include width();
  @include flex-clumn(center);

  .login_model {
    width: 400px;
    background-color: rgba(50, 63, 80, 0.6);
    border-radius: 10px;
    padding: 30px 20px;

    .model-title {
      font-size: 20px;
      text-align: center;
      letter-spacing: 6px;
      color: #fff;
      margin-bottom: 40px;
    }

    .btn-item {
      width: 100%;
      height: 36px;
      @include flex-clumn(center);
      color: #fff;
      background-color: #1890ff;
      border-radius: 5px;
    }
  }
}
</style>
<style lang="scss">
@use '@/assets/style/mixin.scss' as *;

.model-form {
  .el-form {
    .el-form-item {
      margin-bottom: 30px;
    }

    .el-form-item__label {
      color: #fff !important;
    }

    .el-form-item__content {
      @include flex-clumn(center);
    }

    .el-input__wrapper {
      background-color: rgba(0, 0, 0, 0.1);
      box-shadow: none;
    }
  }
}
</style>